<template>
	<div class="layout">
		<Layout>
			<Header></Header>
			<Content :style="{margin: '88px 0px 0', background: '#f8f8f9', minHeight: '700px'}">
				<router-view></router-view>
			</Content>
			<Footer class="layout-footer-center">2011-2016 &copy; TalkingData</Footer>
		</Layout>
	</div>
</template>
<script>
	import Header from '@/components/Header.vue'
    export default {
		components: {Header}, 
        data () {
            return {
                value11: '',
                value12: '',
                value13: '',
                select1: 'http',
                select2: 'com',
                select3: 'day'
            }
        }
    }
</script>
<style lang="stylus">
	// #app
	//   font-family 'Avenir', Helvetica, Arial, sans-serif
	//   -webkit-font-smoothing antialiased
	//   -moz-osx-font-smoothing grayscale
	//   text-align center
	//   color #2c3e50

	// #nav
	//   padding 30px
	//   a
	//     font-weight bold
	//     color #2c3e50
	//     &.router-link-exact-active
	//       color #42b983
	.layout {
		// border: 1px solid #d7dde4;
		background: #f5f7f9;
		position: relative;
		border-radius: 4px;
		overflow: hidden;
	}

	.layout-logo {
		text-align: center;
		width: 100px;
		height: 30px;
		background: #5b6270;
		border-radius: 3px;
		float: left;
		position: relative;
		top: 15px;
		left: 20px;
	}

	.layout-search {
		text-align: center;
		width: 400px;
		height: 45px;
		background: #5b6270;
		border-radius: 3px;
		float: left;
		position: relative;
		top: 12px;
		left: 250px;
	}

	.layout-nav {
		width: 420px;
		margin: 0 auto;
		margin-right: 20px;
	}

	.layout-footer-center {
		margin-top: 40px;
		text-align: center;
		background:#515a6e !important;
		color:white !important;
	}
</style>
